<template>
     <div>
            <div class="esignTest">

              <div style="border: 2px solid #E6E6E6 ;background-color: white">

                  <vue-esign ref="esign" :width="800" :height="300"

                                                   :isCrop="isCrop"

                                                   :lineWidth="lineWidth"

                                                   :lineColor="lineColor"

                                                   :bgColor.sync="bgColor" />

              </div>

                <button @click="handleReset">清空画板</button>

                <button @click="handleGenerate">生成图片</button>

            </div>
     </div>
</template>

<script>

export default {

    name:'esignTest',

    data() {

        return {

            lineWidth: 6,

            lineColor: '#000000',

            bgColor: '',

            resultImg: '',

            isCrop: false

        }

    },

    created() {

    },

    mounted() {

    },

    methods:{

        handleReset () {

            this.$refs.esign.reset()

        },

        handleGenerate () {

            this.$refs.esign.generate().then(res => {

                this.resultImg = res

            }).catch(err => {

                alert(err) // 画布没有签字时会执行这里 'Not Signned'

            })

        }

    }

}

</script>

<style scoped lang="less">

</style>
